import React from 'react'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {formatDate, formatDateWithDot, handleDateChange} from "../../utils/dateService";
import moment from "moment";
import DateTabs from "../../shared-components/DateTabs/DateTabs";
import LocalStorageService from "../../utils/LocalStorageService";
import {getBasketballGameFollowReq} from "../../apis/goApis";
import BasketballGameCard from "../game/Basketball/BasketballGameCard/BasketballGameCard";
import NoDataPage from "../game/Football/NoDataPage/NoDataPage";
class BasketballHistory extends React.Component {
    constructor(props) {
        super(props)
        this.today = moment(new Date()).format('YYYYMMDD')
        this.uid = LocalStorageService.get('userid')
        this.state = {
            tabs: [
                {value: formatDate(handleDateChange(this.today, -3)), title: formatDateWithDot(handleDateChange(this.today, -3)), active: false,},
                {value: formatDate(handleDateChange(this.today, -2)), title: formatDateWithDot(handleDateChange(this.today, -2)), active: false,},
                {value: formatDate(handleDateChange(this.today, -1)), title: formatDateWithDot(handleDateChange(this.today, -1)), active: false,},
                {value: this.today, title: '今天', active: true,},
            ],
            tabIndex: 3,
            list: [],
        }
    }

    componentDidMount() {
        this.all()
    }

    onTabSelected(index) {
        const tabs = this.state.tabs
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].active = i === index
        }
        this.setState({
            tabs: [...tabs,],
            tabIndex: index,
        })
    }

    all() {
        if (LocalStorageService.get('isLogin')) {
            getBasketballGameFollowReq({
                uid: this.uid,
            }).then((resp) => {
                const list = resp.data.ok
                if (list) {
                    this.setState({
                        list,
                    })
                }
            })
        }
    }

    render() {

        const date = this.state.tabs[this.state.tabIndex].value
        const listToRender = this.state.list.filter(game => {
            const d = moment(game.Startt * 1000).format('YYYYMMDD')
            return d === date
        })
        const list = listToRender.map((game, index) => <BasketballGameCard
            key={index}
            game={game}
            markedList={this.state.list}
        />)

        return <GoBackLayout
            history={this.props.history}
            title='历史关注'
        >

            <DateTabs
                tabs={this.state.tabs}
                onTabSelected={(index) => this.onTabSelected(index)}
                today={this.today}
            />

            {listToRender.length > 0 ? list : <NoDataPage/>}

        </GoBackLayout>
    }
}

export default BasketballHistory